<template>
	<view>
		<uni-popup ref="regionPopup" type="bottom" background-color="#fff">
			<view class="popupWall">
				<view class="title-list">
					<view v-for="(item,index) in regionData"  :key="index">
						<view class="title-item" 
						:class="{'active': tabIndex == index}"
						v-if="item.list.length > 0"
						@click="tabIndex = index">
							<text v-if="item.id !== ''">{{item.name}}</text>
							<text v-else class="placeholder-text">请选择</text>
						</view>
					</view>
				</view>
				<view v-for="(region,index) in regionData" :key="index">
					<view class="tag-list" v-if="tabIndex === index">
						<view class="tag-item" 
						v-for="item in region.list"
						:key="item.id"
						@click="tabSelect(item)"
						:class="{'active': region.id == item.id}"
						>{{ item.name }}</view>
					</view>
				</view>
				
				<view class="popup-ft">
					<view class="popup-ftBtn" @click="popupClose"> 取 消 </view>
					<view class="popup-ftBtn active" @click="submitFn"> 确 认 </view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import { regionList, regionTreeLevel } from "@/api/common.js";
	export default {
		name:"regionSelect",
		props:{
			// 显示几级
			showLevel:{
				type: Number,
				default: 4
			}
		},
		data() {
			return {
				tabIndex: 0, // 位置第几级
				regionData:[
					{ id: '', name:'', list:[] }, // 省
					{ id: '', name:'', list:[] }, // 市
					{ id: '', name:'', list:[] }, // 区
					{ id: '', name:'', list:[] }, // 街道
				],
			};
		},
		computed: {},
		created() {
			this.getRegion(0,'')
		},
		mounted() {
			this.regionData.splice(this.showLevel);
			console.log(this.regionData);
		},
		methods: {
			// 选择内容
			tabSelect(data){
				let index = this.tabIndex
				let { id, name } = data
				
				this.regionData = this.regionData.map((item,idx) =>{
					if(idx === index){
						Object.assign(item, {id, name})
					}
					if(idx > index){
						Object.assign(item, {id:'', name:''})
					}
					return item
				})
				
				if(index < this.showLevel){
					// console.log(index)
					index = index + 1
					this.getRegion(index, id)
					this.tabIndex = index < this.showLevel ? index : this.showLevel -1
				}
			},
			// 获取列表内容
			getRegion(index, parentId){
				if(index < this.showLevel){
					regionList({parentId}).then(res =>{
						this.$set(this.regionData[index],'list',res.data)
					})
				}
			},
			// 确认
			submitFn(){
				var hasEmptyId = this.regionData.some(v => v.id =='')
				if(hasEmptyId){
					uni.showToast({
						title: '选项不能为空',
						duration: 2000
					});
					return true
				}
				let arr = this.regionData.map(v =>{
					let item = {
						id:v.id,
						name: v.name
					}
					return item
				})
				this.$emit('change', arr);
				this.popupClose()
			},
			// 打开弹窗
			popupOpen(){
				this.$refs.regionPopup.open()
			},
			// 关闭弹窗
			popupClose(){
				this.$refs.regionPopup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupWall{
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		// .popup-title{
		// 	font-size: 32rpx;
		// 	color: #000000;
		// 	font-weight: 500;
		// 	padding: 32rpx 24rpx;
		// }
		.title-list{
			display: flex;
			padding: 24rpx 24rpx 16rpx;
			.title-item{
				position: relative;
				font-size: 28rpx;
				line-height: 72rpx;
				color: rgba(0, 0, 0, 0.45);
				font-weight: 500;
				padding: 0 16rpx;
				.placeholder-text{
					color: #000000;
				}
				&.active::after{
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					content: '';
					width: 20rpx;
					height: 6rpx;
					display: block;
					background: #FF9E24;
					border-radius: 6rpx;
					margin: auto;
				}
			}
		}
		.tag-list{
			min-height: 50vh;
			// display: flex;
			// flex-wrap: wrap;
			margin: 10rpx 14rpx;
			.tag-item{
				width: 23%;
				height: 64rpx;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.88);
				line-height: 28rpx;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				display: inline-block;
				vertical-align: top;
				background: rgba(216, 216, 216, 0.36);
				border-radius: 32rpx;
				margin: 0 1% 20rpx;
				text-align: center;
				padding: 18rpx 8rpx;
				box-sizing: border-box;
				&.active{
					color: #FFFFFF;
					background: #FF9E24;
				}
			}
		}
		.popup-ft{
			display: flex;
			box-shadow: 0 -24rpx 24rpx 0 rgba(201, 201, 201, 0.1);
			.popup-ftBtn{
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.45);
				line-height: 88rpx;
				text-align: center;
				padding-bottom: 30rpx;
				font-weight: bold;
				flex: 1;
				&.active{
					color: #FF9E24;
				}
			}
		}
	}
</style>